import { Button, Col, Row, Typography } from 'antd'
import { useEffect, useState } from 'react'
import { postCompanyInfoDetailFinanceProcess } from '@/api/companyDetail/CompanyOverview'
import { useImmer } from 'use-immer'

const CapitalIndicators = (props: any) => {
  const { data, companyCode } = props

  const CardList = (data: any) => {
    const { item } = data

    return (
      <div className="card-list-wrapper" id="融资情况">
        <p className="item-label">{item.label || '-'}</p>
        <div className="item-value flex items-center">
          <div className="mr-5px">{item.value || '-'}</div>
          {item.unit && <span className="wrap-style">{item.unit}</span>}
        </div>
      </div>
    )
  }

  const groupList = [
    {
      label: '融资阶段',
      value: data.value?.financingRound || 0,
      unit: '',
      span: 2
    },
    {
      label: '累计融资金额',
      value: data.value?.financingSum || 0,
      unit: '亿人民币',
      span: 2
    }
  ]

  const [memberList, setMemberList] = useState([])

  const [total, settotal] = useState(0)

  const PAGESIZE = 10

  const [pagination, setPagination] = useImmer<any>({
    current: 1,
    pageSize: PAGESIZE
  })

  function getList() {
    postCompanyInfoDetailFinanceProcess({
      companyCode: companyCode,
      current: pagination.current,
      pageSize: pagination.pageSize
    }).then((res) => {
      setMemberList(res.data.list.map((item: any) => ({ ...item, companyName: item.investCompanyName })) || [])
      settotal(res.data.total || 0)
    })
  }
  const addPage = () => {
    if (pagination?.current * pagination.pageSize < total) {
      setPagination((prev: { current: number }) => {
        prev.current++
      })
    }
    settotal(0)
  }
  const minusPage = () => {
    setPagination((prev: { current: number }) => {
      prev.current--
    })
  }

  useEffect(() => {
    getList()
  }, [pagination])

  const { Text } = Typography

  const CompanyItem = (props: any) => {
    const { data, index } = props
    return (
      <div className="company-item-wrapper">
        <div
          className={`company-img company-img-${index % 5}`}
          style={{ width: 48 + 'px', height: 48 + 'px', fontSize: 16 + 'px', lineHeight: 16 + 2 + 'px' }}>
          {data.iconurl ? <img src={data.iconurl} alt="" /> : <div>{data.companyName.substring(0, 4)}</div>}
        </div>
        <div className="right-content">
          <Text
            ellipsis={{ tooltip: true }}
            style={{
              maxWidth: '205px'
            }}>
            {data.companyName}
          </Text>
        </div>
      </div>
    )
  }

  return (
    <div className="team-wrapper">
      <Row gutter={[16, 16]}>
        {groupList.map((item: any, index: any) => (
          <Col span={12} key={index}>
            <CardList item={item} />
          </Col>
        ))}
      </Row>
      {memberList.length && (
        <div>
          <p className="sub-title">投资方</p>
          <Row gutter={[16, 16]}>
            {memberList.map((item: any, index: any) => (
              <Col span={12} key={index}>
                <CompanyItem data={item} index={index} show-cursor={true} />
              </Col>
            ))}
          </Row>
          <div className="flex items-center justify-end">
            <div className="mr-10px">{`共${total}`}条</div>
            <Button className="mr-10px" type="primary" onClick={minusPage} disabled={pagination.current === 1}>
              上一页
            </Button>
            <div className="mr-20px">{` ${pagination.current} / ${Math.ceil(total / 10)} `}</div>
            <Button type="primary" onClick={addPage} disabled={pagination.current * pagination.pageSize >= total}>
              下一页
            </Button>
          </div>
        </div>
      )}
    </div>
  )
}
export default CapitalIndicators
